H5的动画效果，到底应该用H5动画来实现还是应该做成视频直接插入？

上分析：

动画篇

1.动画加载时间短，不会消耗太多流量

动画是由多个平面素材组合（也就是多张图），而视频，就是视频了。两者相比，视频的容量会更大，所以也就需要更多时间和更多流量来加载。运气不好的视频型H5是这样的：点开链接，却出现一个“视频加载中”

这无疑是一个“流量预警”：接下来要播放视频了，会用掉很多的流量。于是网速不好不想等的同学，流量不够的同学，流量够但是不想浪费的同学，都会在这一步默默地左上角退出。

而动画基本不会有这样的问题，几张图片（通常还是压缩好的），快速加载，然后就是漂亮的动画效果了。

2.可以添加更丰富的交互

这无疑是动画党最坚定的理由了。视频因为是一整个文件，除了暂停，继续播放，基本没有其他的交互效果。

而动画因为是多个元素的组合，每个元素都有进行下一步动作的可能，每一步动画都可以添加不同的手势交互，甚至可以控制动画双向播放。“交互”毕竟一直是H5的重头戏，缺少了交互效果的H5，似乎也少了那么点乐趣。

3.对流量党更加友好

这个应该不用多解释了，可能10个动画H5才能比得上1个视频H5的容量。而且由于视频都是从头到尾直接播放，所以如果出现卡顿或者网速问题，分分钟就是“重头再来”，这对于没WiFi也没有4G包年的流量党来说实在是太奢侈了。

4.平均制作成本较低

动画基本标配：平面设计+交互

视频基本标配：平面设计+交互+视频制作

嗯，就是这样。

视频篇

1.画面真实度高，细节更丰富

跟只用平面素材拼凑起来的动画比，用视频编辑软件各种加特效、甚至是直接高清拍摄的视频，展现出来的效果当然有更好的细节，而且看起来也会更连贯更真实。而动画如果加载不顺畅的话，那就成了PPT。。。

2.保证声画同步

动画只能额外加音乐，如果加载速度不一致（比如音乐快了点，画面慢了点），就可能会有声画不同步的现象。所以目前动画基本是只有背景音乐，最多是交互的时候产生音效。

而视频是画面连音乐一体的，就完全不用担心这样的问题啦。

3.降低对手机的要求

这一条看起来很奇怪吧哈哈，其实是这样，动画比视频的元素更“小”，视频比动画的元素更“少”。也就是说，只要网速ok，视频加载完了就可以直接播放。

但动画素材加载出来之后，还要手机不停地运算来驱动动画效果，不同型号的手机就要考虑不同的适配问题，差一点的手机遇上复杂的动画可能就卡成平面了。可以说，这就是很多H5中复杂的动画效果选择用视频来展示的重要原因。

4.安卓端的播放限制

这个问题是这样的，腾讯爸爸的微信和qq都自带内置浏览器（qq浏览器X5内核），而他们的内置浏览器都默认——安卓系统视频置顶！

也就是说，只要你是安卓机，就会自动把视频弹到最顶端播放，还自动全屏。不仅会有个无法隐藏的进度条，而且所有的交互效果都——与你无关。

最可恶的是，部分安卓机型可能还会在视频播放结束后出现广告。只有点击手机上的返回键才会回到H5的界面。

关于这个问题，目前能给的建议就是：浏览器中打开。不过最近有用户反映，就算浏览器打开也没办法解决这个问题，那就。。。建议先不用视频吧